<template>
  <div class="message">
    <van-nav-bar title="我的消息" left-text="" left-arrow @click-left="onClickLeft" :fixed="true" :placeholder="true" />
    <div class="list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="onLoad">
          <div class="list-item" v-for="i in list" :key="i.id" :title="i.title" @click="goDetails(i.id)">
            <div class="left">
              <div class="top"><van-icon name="bell" color="" /><span>{{ i.title }}</span></div>
              <div class="bot"><van-icon name="clock-o" color="#2CB9A4;"  /><span>{{ i.createtime
              }}</span></div>
            </div>
            <div class="right">
              <span class="circle" v-if="i.is_read === '0'"></span>
              <van-icon name="arrow" />
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
      <noData :list="list" :lastPage="last_page" :page="page" />
    </div>
  </div>
</template>
<style></style>
<script setup>
import { useRouter } from 'vue-router'
import noData from "@/components/noData/noData.vue"
const router = useRouter();
import { ref } from 'vue';
const list = ref([]);
const last_page = ref(0)
const page = ref(1)
import { messageList } from "@/services";
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const getList = async () => {
  let res = await messageList({ page: page.value })
  list.value = list.value.concat(res.data.data)
  // list.value = [{
  //   title: '洗车类型/商品名称',
  //   is_read: 0,
  //   createtime: '2012-12-14',
  //   id: 1
  // }]
  last_page.value = res.data.last_page
  if (page.value == last_page.value || last_page.value == 0) {
    finished.value = true;
    return;
  }
  page.value++
  console.log(list, 'list')
}
const onLoad = () => {//滚动条与底部距离小于 offset 时触发,offset默认300
  if (refreshing.value) {
    list.value = [];
    refreshing.value = false;
  }
  if (page.value == last_page.value) {
    getList()
    finished.value = true;
    return
  } else{
    loading.value = false;
    getList()
  }
  // setTimeout(() => {
  //   if (refreshing.value) {
  //     list.value = [];
  //     refreshing.value = false;
  //   }

  //   for (let i = 0; i < 10; i++) {
  //     list.value.push(list.value.length + 1);
  //   }
  //   loading.value = false;
  //   console.log(list,'list')
  //   if (list.value.length >= 40) {
  //     finished.value = true;
  //   }
  // }, 1000);
};

const onRefresh = () => {
  last_page.value = 0
  page.value = 1
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};
// 返回按钮
const onClickLeft = () => {
  router.back();
};
const goDetails = (e) => {
  router.push({
    path: '/messageDetails',
    query: {
      id: e
    }
  })
}
</script>

<style lang="scss" scoped>
.message {
  .list {
    padding: 20px;

    .list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(217, 217, 217, 0.60);
      margin-top: 10px;

      .left {
        color: #313131;
        font-family: PingFang SC;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        display: flex;
        flex-direction: column;

        .top {
          margin-bottom: 6px;
        }

        .bot {
          color: #B6B6B6;
          font-family: PingFang SC;
          font-size: 12px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }
      }

      .right {
        display: flex;
        justify-content: center;
        align-items: center;

        .circle {
          width: 6px;
          height: 6px;
          background: #2CB9A4;
          border-radius: 50%;
          display: inline-block;

        }

        .arrow {}

        i {
          color: #B6B6B6;
          margin-left: 5px;
        }
      }

      i {
        color: #2CB9A4;
        margin-right: 10px;
      }
    }
  }
}
</style>
